<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/const.js"></script>
    <style>
        ul>li{list-style-type: none}
    </style>
</head>
<body>
   <div id="app" container>
       <h1>The Goods Page</h1>
       <a v-bind:href="'goods-add.html'">add goods</a>
       <table class="table">
           <thead>
           <thead>
           <tr>
               <th>id</th>
               <th>name</th>
               <th>remark</th>
               <th>createdTime</th>
               <th colspan="2">删除</th>
               <th colspan="2">修改</th>
           </tr>
           </thead>
           <tbody>
               <tr v-for="goods in goodsList">
                   <td>{{goods.id}}</td>
                   <td>{{goods.name}}</td>
                   <td>{{goods.remark}}</td>
                   <td>{{goods.createdTime}}</td>
                   <td><button v-on:click="remove(goods.id)" >delete</button></td>
                   <td><a v-bind:href="'goods-update.html?id='+goods.id">update</a></td>
               </tr>
           </tbody>
       </table>

   </div>

</body>
<script type="text/javascript">
    var config = {
        el:"#app",
        data:{
            goodsList:[]
        },
        methods:{
            selectAll:function(){
                var url=serverHost+"doGoodsUI";
                axios.get(url).then(
                    function(res){
                        this.vue.goodsList = res.data;
                });
            },
            remove:function(id){
                var url = serverHost+"doDeleteById/"+id;
                axios.get(url).then(
                    function(res){
                       location.href="goods.html";
                });
            }
        },
        mounted:function(){
            this.selectAll();
        }
    };

    var vue = new Vue(config);

</script>
</html>